<template>
  <div>
    <div class="app-container">
      <el-form ref="postForm" :inline="true" size="mini" :model="postForm" :label-position="'right'" label-width="80px">
        <el-row type="flex" justify="space-between" :gutter="20">
          <el-form-item label="操作时间:">
            <el-date-picker
              v-model="postForm.tabNameSuffix"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item label="用户姓名:">
            <el-input v-model="postForm.sysUserName" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="操作类型:">
            <el-select v-model="postForm.logType" clearable placeholder="请选择">
              <el-option key="CASE" label="案件操作" value="CASE" />
              <el-option key="BASE" label="系统设置" value="BASE" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="query()">查询</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <el-table :height="tableHeight" :data="tableData" stripe border width="100%">
        <el-table-column type="index" align="center" width="50"></el-table-column>
        <el-table-column prop="sysUserName" label="用户姓名" />
        <el-table-column prop="crtTime" label="操作时间" />
        <el-table-column prop="logType" label="操作类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.logType==='CASE'">案件</el-tag>
            <el-tag v-if="scope.row.logType==='BASE'">系统设置</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="operateContent" label="操作内容" />
        <el-table-column prop="operateInfo" label="操作详情" />

      </el-table>
      <el-row type="flex" class="row-bg" justify="center">
        <el-pagination
          background
          layout="total,prev,pager,next,jumper,sizes"
          :total="total"
          @size-change="handleSizeChange"
          :current-page.sync="currentPage"
          :page-sizes="[15, 30, 45, 60, 75,90,105,120,135,150]"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </div>
  </div>
</template>

<script>
  import { page } from '@/api/system/baseLog'

  export default {
    props: ['noCreated'],
    data() {
      return {
        tableHeight: window.innerHeight - 180,
        qiniuDataObj: { token: '' },
        fileUrl: process.env.VUE_APP__FILE_URL,
        // 总条数
        total: 0,
        // 每页显示个数
        pageSize: 15,
        // 页码
        currentPage: 1,
        // 查询条件
        postForm: {},
        // 查询条件
        selectForm: {},
        info: {},
        // 列表数据
        tableData: [],
        // 编辑下标
        editIndex: 0,
        // 是否展示表单
        centerDialogVisible: false,
        dialogVisible: false,
        dialogImageUrl: null,
        userId: null,
        // 表单标题
        title: null,
        // 省
        province: [],
        // 市
        city: [],
        // 区
        district: [],
        rules: {
          name: [{ required: true, message: '请输入内容', trigger: 'chang' }]
        }
      }
    },
    created() {
      if (!this.noCreated) {
        this.getData()
      }
    },
    methods: {
      handleSizeChange(val) {
        this.pageSize = val
      },
      // 初始化
      init(userId) {
        this.postForm = {}
        this.postForm.userId = userId
        this.selectForm = this.postForm
        this.currentPage = 1
        this.getData()
      },
      // 分页查询
      handleCurrentChange(val) {
        this.currentPage = val
        this.getData()
      },
      // 查询条件
      query() {
        this.selectForm = this.postForm
        this.currentPage = 1
        this.getData()
      },
      getData() {
        // 请求分页参数
        page(this.pageSize, this.currentPage, this.selectForm.tabNameSuffix, this.selectForm.sysUserName, this.selectForm.logType).then(response => {
          this.total = parseInt(response.count)
          this.tableData = response.data
        })
      }
    }
  }
</script>

